<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .clearfix:after{
            content:"";
            display: block;
            clear:both;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .xingZuoYunShi{
            width: 278px;
            height: 175px;
            margin: 50px auto;
            border: 1px solid #d2e1f1;
        }
        .hd{
            width: 100%;
            height: 35px;
        }
        h2{
            margin: 0;
            padding: 0;
            font-size: 14px;
            text-indent: 15px;
            margin-top: 10px;
        }
        p{
            margin: 0;
            padding: 0;
        }
        h2 a{
            color: #0873c0;
            text-decoration: none;
        }
        .bd{
            padding: 0 19px;
        }
        .bdLeft a{
            display: block;
            height: 50px;
            width: 50px;
            background: url(astroIcon.png);
        }
        .bdRight{
            margin-left: 10px;
            width: 180px;
            height: 50px;
        }
        #sele{
            margin-bottom: 6px;
        }
        .bdRight p{
            width: 65px;
            font-size: 12px;
            height: 18px;
            line-height: 18px;
        }
        .bdRight .yunshi{
            position: relative;
        }
        .bdRight .yunshi div{
            width: 80px;
            height: 18px;
            position: absolute;
            left: 65px;
            top: 3px;
        }
        .bdRight .starBg{
            background: url(yunshi.png) no-repeat;
        }
        .bdRight .star{
            background: url(yunshi.png) no-repeat 0 -28px;
        }
        
        .ft{
            padding: 20px 19px 0;
        }
        .ft p{
            font-size: 14px;
            color: #323f5a;
        }
    </style>
</head>
<body>
<div class="xingZuoYunShi">
    <div class="hd">
        <h2>
            <a href="#">星座运势</a>
        </h2>
    </div>
    <div class="bd clearfix">
        <div class="bdLeft fl">
            <a href="#" id="xingZuoIMG"></a>
        </div>
        <div class="bdRight fr">
            <select id="sele">
                <option value="0">白羊座(03.21-04.19)</option>
                <option value="1">金牛座(04.20-05.20)</option>
                <option value="2">双子座(05.21-06.21)</option>
                <option value="3">巨蟹座(06.22-07.22)</option>
                <option value="4">狮子座(07.23-08.22)</option>
                <option value="5">处女座(08.23-09.22)</option>
                <option value="6">天秤座(09.23-10.23)</option>
                <option value="7">天蝎座(10.24-11.22)</option>
                <option value="8">射手座(11.23-12.21)</option>
                <option value="9">摩羯座(12.22-01.19)</option>
                <option value="10">水瓶座(01.22-02.18)</option>
                <option value="11">双鱼座(02.19-03.20)</option>
            </select>
            <div class="yunshi">
                <p>今日运势：</p>
                <div class="starBg"></div>
                <div class="star"></div>
            </div>
        </div>
    </div>
    <div class="ft">
        <p id="todayYs">最近非常适合你和另一半规划未来，聊一聊彼此的理想，在精神上面，双方都能得到非常稳固的成长。...[详细]</p>
    </div>
</div>
<script>
    // var xingzuo =["白羊座(03.21-04.19)","金牛座(04.20-05.20)","双子座(05.21-06.21)","巨蟹座(06.22-07.22)","狮子座(07.23-08.22)","处女座(08.23-09.22)","天秤座(09.23-10.23)","天蝎座(10.24-11.22)","射手座(11.23-12.21)","摩羯座(12.22-01.19)","水瓶座(01.22-02.18)","双鱼座(02.19-03.20)"]
    var yunshiStar = [1,3,5,8,5,7,10,0,1,8,9,4];
    var yunshiText = ["最近非常适合你和另一半规划未来，聊一聊彼此的理想，在精神上面，双方都能得到非常稳固的成长。...[详细]","你有很多聪明的想法，暗中部署规划能让你职场道路走得更加顺遂。今天很适合和伴侣约会，做一些有...[详细]","今天适合你回顾一下过去的路，有哪些跌倒的经历与难以明说的经验，都是你成长的价值所在。适当憧...[详细]","疗伤的好日子，和朋友聊天的过程，你能发现真实的自己，不知不觉有很多明确的想法出现。今天适合...[详细]","这段时间里对自己的工作相当聚焦，只要一心一意对待就能有不错的效率，今天也是特别适合你学习的...[详细]","你感到大脑有些转不动，也可能需要为了房屋和家庭的事情操心。深层的不安全感可能会阻碍你的某些...[详细]","你有些恢复元气了，适合考虑自身目标，与应该做些什么，如何开拓财富目标。总之做好每一个点滴，...[详细]","最近你可能容易受到朋友圈的影响，而导致无法理智思考。他人的信息可能会使你思绪有些混乱，财务...[详细]","工作上容易有不负重压的感受，一些想法有卡壳的感觉，。但是天将降大任于斯人，必先劳其筋骨，苦...[详细]","你可能会触及到一些悲观的想法，创意灵感都阻塞了。纠结过后还是要继续回归到正轨上，坚持自己的...[详细]","今天有些水瓶可能收到一些款项，红包，礼物，或者在投资理财，生意领域有一些进账。但你的想法有...[详细]","重心都在感情上，导致工作压力再次出现。今日你与伴侣之间关系相当好，但是工作上容易有卡壳的感...[详细]"]
    function $i(id){
        return document.getElementById(id);
    }
    // function $c(className){//该方法不兼容不支持ClassName获得DOM的浏览器
    //     return document.getElementsByClassName(className);
    // }        ★★★★兼容通过类名获取DOM的 方法函数★★★★
                   function $c(className){
                        if(document.getElementsByClassName){//如果可以用则直接用
                            return document.getElementsByClassName(className);
                        }
                        //不可以用时：
                        var arr = [];
                        var dom = document.getElementsByTagName("*");
                        for(var i=0;i<dom.length;i++){
                            var text = dom[i].className.split(" ");//多个类名时字符串转化为数组
                            // if(text.indexOf(className) != -1){//如果该数组存在该ClassName
                            //     arr.push(dom[i])//加入arr
                            // }
                            for(var j=0;j<dom.length;j++){
                                if(text[j]==className){
                                    arr.push(dom[i])
                                }
                            }
                        }
                        return arr;
                    }
    $i("sele").onchange = function(){
        $c("bdLeft")[0].getElementsByTagName("a")[0].style.backgroundPosition = "0 "+(-50*this.value)+"px";//星座ico 更换  
        $c("star")[0].style.width = 8*yunshiStar[this.value]+"px";//运势星数
        $i("todayYs").innerHTML = yunshiText[this.value];//运势文本
    }
</script>
</body>
</html>